<!--
 * @Author: 段本显
 * @FilePath: \my-vue-app\src\App.vue
 * @Date: 2021-12-29 19:58:41
 * @LastEditors: 段本显
 * @LastEditTime: 2022-01-04 14:01:07
 * @Email: duanbenxian@jianq.com
 * 如果有bug，那肯定不是我的锅，噜噜噜
-->
<template>
  <van-config-provider :theme-vars="themeVars">
    <router-view v-slot="{ Component }">
      <transition :name="'page-' + (direction === 'forward' ? 'in' : 'out')">
        <keep-alive>
          <component :is="Component"></component>
        </keep-alive>
      </transition>
    </router-view>
  </van-config-provider>
</template>
<script setup lang="ts">
import { computed, reactive } from 'vue'
import { useStore } from 'vuex'
import customTheme from '@/theme'
const store = useStore()
const direction = computed(() => store.state.transition.direction)

// 定制主题
const themeVars = reactive(customTheme)
</script>

<style>
@import '@/scss/reset.scss';
#app {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-size: 20px;
}
.page-out-enter-active,
.page-out-leave-active,
.page-in-enter-active,
.page-in-leave-active {
  flex: 1;
  will-change: transform;
  transition: all 300ms;
  backface-visibility: hidden;
  perspective: 1000;
  overflow: hidden;
}
.page-in-enter-active {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.page-in-enter-to {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.page-in-leave-to {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}

.page-out-leave-to {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}

.page-out-enter-active {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}

.page-out-enter-to {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.van-config-provider {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
}
</style>
